﻿<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Responsive Bootstrap 4 Admin &amp; Dashboard Template">
        <meta name="author" content="Bdtask">
        <title>Bhulua - Bootstrap 4 Admin Template Deshboard</title>
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/dist/img/favicon.png">
        <!--Global Styles(used by all pages)-->
        <link href="http://cdn.bootstrapmb.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
        <link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
        <link href="assets/plugins/typicons/src/typicons.min.css" rel="stylesheet">
        <link href="assets/plugins/themify-icons/themify-icons.min.css" rel="stylesheet">
        <!--Third party Styles(used by this page)--> 
        <link href="assets/plugins/modals/component.css" rel="stylesheet">
        <!--Global Styles(used by all pages)-->

        <!--Start Your Custom Style Now-->
        <link href="assets/dist/css/style.css" rel="stylesheet">
    </head>
    <body class="fixed">
        <!-- Page Loader -->
        <div class="page-loader-wrapper">
            <div class="loader">
                <div class="preloader">
                    <div class="spinner-layer pl-green">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>
                <p>Please wait...</p>
            </div>
        </div>
        <!-- #END# Page Loader -->
        <div class="wrapper">
            <!-- Sidebar  -->
            <nav class="sidebar sidebar-bunker">
                <div class="sidebar-header">
                    <!--<a href="index.html" class="logo"><span>bd</span>task</a>-->
                    <a href="index.html" class="logo"><img src="assets/dist/img/logo.png" alt=""></a>
                </div><!--/.sidebar header-->
                <div class="profile-element d-flex align-items-center flex-shrink-0">
                    <div class="avatar online">
                        <img src="assets/dist/img/avatar-1.jpg" class="img-fluid rounded-circle" alt="">
                    </div>
                    <div class="profile-text">
                        <h6 class="m-0">Naeem Khan</h6>
                        <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57322f363a273b3217303a363e3b7934383a">[email&#160;protected]</a></span>
                    </div>
                </div><!--/.profile element-->
                <form class="search sidebar-form" action="#" method="get" >
                    <div class="search__inner">
                        <input type="text" class="search__text" placeholder="Search...">
                        <i class="typcn typcn-zoom-outline search__helper" data-sa-action="search-close"></i>
                    </div>
                </form><!--/.search-->
                <div class="sidebar-body">
                    <nav class="sidebar-nav">
                        <ul class="metismenu">
                            <li class="nav-label">Main Menu</li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-home-outline mr-2"></i>
                                    Dashboard
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="index.html">Default</a></li>
                                    <li><a href="dashboard_two.html">Dashboard Two</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-chart-pie-outline mr-2"></i>
                                    Charts
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="charts_flot.html">Flot Chart</a></li>
                                    <li><a href="charts_Js.html">Chart js</a></li>
                                    <li><a href="charts_morris.html">Morris Charts</a></li>
                                    <li><a href="charts_sparkline.html">Sparkline Charts</a></li>
                                    <li><a href="charts_am.html">Am Charts</a></li>
                                    <li><a href="charts_apex.html">Chart Apex</a></li>
                                </ul>
                            </li>
                            <li><a href="chat.html"><i class="typcn typcn-messages mr-2"></i> Chat</a></li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-mail mr-2"></i>
                                    Mailbox
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="mailbox.html">Mailbox</a></li>
                                    <li><a href="mailbox_details.html">Mailbox Details</a></li>
                                    <li><a href="compose.html">Compose</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-archive mr-2"></i>
                                    Tables
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="tables_bootstrap.html">Bootstrap tables</a></li>
                                    <li>
                                        <a class="has-arrow" href="#" aria-expanded="false">Data tables</a>
                                        <ul class="nav-third-level">
                                            <li><a href="tables_data_basic.html">Basic initialization</a></li>
                                            <li><a href="tables_data_sources.html">Data sources</a></li>
                                            <li><a href="tables_data_api.html">API</a></li>
                                            <li><a href="tables_data_styling.html">Styling</a></li>
                                            <li><a href="tables_data_advanced.html">Advanced initialization</a></li>
                                            <li><a href="tables_data_bootstrap4.html">Bootstrap4</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="tables_foo.html">FooTable</a></li>
                                    <li><a href="tables_jsgrid.html">Jsgrid table</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-clipboard mr-2"></i>
                                    Forms
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="forms_basic.html">Basic Forms</a></li>
                                    <li><a href="forms_input_group.html">Input group</a></li>
                                    <li><a href="forms_mask.html">Form Mask</a></li>
                                    <li><a href="forms_touchspin.html">Touchspin</a></li>
                                    <li><a href="forms_select.html">Select</a></li>
                                    <li><a href="forms_cropper.html">Cropper</a></li>
                                    <li><a href="forms_file_upload.html">Forms File Upload</a></li>
                                    <li><a href="forms_editor_ck.html">CK Editor</a></li>
                                    <li><a href="forms_editor_summernote.html">Summernote</a></li>
                                    <li><a href="forms_wizard.html">Form Wizaed</a></li>
                                    <li><a href="forms_editor_markdown.html">Markdown</a></li>
                                    <li><a href="forms_editor_trumbowyg.html">Trumbowyg</a></li>
                                    <li><a href="forms_editor_wysihtml5.html">Wysihtml5</a></li>
                                </ul>
                            </li>
                            <li class="nav-label">Components</li>
                            <li class="mm-active">
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-coffee mr-2"></i>
                                    UI Elements
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="ui_buttons.html">Buttons</a></li>
                                    <li><a href="ui_badges.html">Badges</a></li>
                                    <li><a href="ui_spinners.html">Spinners</a></li>
                                    <li><a href="ui_tabs.html">Tab</a></li>
                                    <li><a href="ui_notification.html">Notification</a></li>
                                    <li><a href="ui_tree_view.html">Tree View</a></li>
                                    <li><a href="ui_progressbars.html">Progressber</a></li>
                                    <li><a href="ui_list_view.html">List View</a></li>
                                    <li><a href="ui_ratings.html">Ratings</a></li>
                                    <li><a href="ui_datetime_picker.html">Date & Time Picker</a></li>
                                    <li><a href="ui_typography.html">Typography</a></li>
                                    <li class="mm-active"><a href="ui_modals.html">Modals</a></li>
                                    <li><a href="ui_icheck_toggle_pagination.html">iCheck, Toggle, pagination</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-world-outline mr-2"></i>
                                    Maps
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="maps_amcharts.html">Amcharts Map</a></li>
                                    <li><a href="maps_gmaps.html">gMaps</a></li>
                                    <li><a href="maps_data.html">Data Maps</a></li>
                                    <li><a href="maps_jvector.html">Jvector Maps</a></li>
                                    <li><a href="maps_google.html">Google map</a></li>
                                    <li><a href="maps_snazzy.html">Snazzy Map</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-info-large-outline mr-2"></i>
                                    Icons
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="icons_bootstrap.html">Bootstrap Icons</a></li>
                                    <li><a href="icons_fontawesome.html">Fontawesome Icon</a></li>
                                    <li><a href="icons_flag.html">Flag Icons</a></li>
                                    <li><a href="icons_material.html">Material Icons</a></li>
                                    <li><a href="icons_weather.html">Weather Icons </a></li>
                                    <li><a href="icons_line.html">Line Icons</a></li>
                                    <li><a href="icons_pe.html">Pe Icons</a></li>
                                    <li><a href="icon_socicon.html">Socicon Icons</a></li>
                                    <li><a href="icons_typicons.html">Typicons Icons</a></li>
                                </ul>
                            </li>
                            <li><a href="widgets.html"><i class="typcn typcn-gift mr-2"></i>Widgets</a></li>
                            <li><a href="calender.html"><i class="typcn typcn-calendar-outline mr-2"></i>Calendar</a></li>
                            <li class="nav-label">Extra</li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-device-tablet mr-2"></i>
                                    App Views
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="invoice.html">Invoice</a></li>
                                    <li><a href="invoice2.html">Invoice two</a></li>
                                    <li><a href="timeline_horizontal.html">Horizontal timeline</a></li>
                                    <li><a href="timeline_vertical.html">Vertical timeline</a></li>
                                    <li><a href="pricing.html">Pricing Table</a></li>
                                    <li><a href="range_slider.html">Range Slider</a></li>
                                    <li><a href="carousel.html">Carousel</a></li>
                                    <li><a href="code_editor.html">Code editor</a></li>
                                    <li><a href="gridSystem.html">Grid System</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-book mr-2"></i>
                                    Authentication
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="register.html">Register</a></li>
                                    <li><a href="user_profile.html">Profile</a></li>
                                    <li><a href="forget_password.html">Forget password</a></li>
                                    <li><a href="lockscreen.html">Lockscreen</a></li>
                                    <li><a href="404.html">404 Error</a></li>
                                    <li><a href="505.html">505 Error</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-flow-merge mr-2"></i>
                                    Multi Level Menu
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="#">Menu Item</a></li>
                                    <li><a href="#">Menu Item - 2</a></li>
                                    <li>
                                        <a class="has-arrow" href="#" aria-expanded="false">Level - 2</a>
                                        <ul class="nav-third-level">
                                            <li><a href="#">Menu Item</a></li>
                                            <li>
                                                <a class="has-arrow" href="#" aria-expanded="false">Level - 3</a>
                                                <ul class="nav-fourth-level">
                                                    <li><a href="#">Level - 4</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="blank-page.html"><i class="typcn typcn-bookmark mr-2"></i>Blank page</a></li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-puzzle-outline mr-2"></i>
                                    Layouts
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="layouts_layout.html">Layout</a></li>
                                    <li><a href="layouts_fixed.html">Fixed layout</a></li>
                                    <li><a href="layouts_fixed-without__navbar.html">Fixed layout without navbar</a></li>
                                </ul>
                            </li>
                            <li><a href="changelog.html"><i class="typcn typcn-attachment-outline mr-2"></i>Changelog<span class="badge badge-success ml-auto">v1.1.0</span></a></li>
                            <li><a href="#"><i class="typcn typcn-support mr-2"></i>Documentation</a></li>
                        </ul>
                    </nav>
                </div><!-- sidebar-body -->
            </nav>
            <!-- Page Content  -->
            <div class="content-wrapper">
                <div class="main-content">
                    <nav class="navbar-custom-menu navbar navbar-expand-lg m-0">
                        <div class="sidebar-toggle-icon" id="sidebarCollapse">
                            sidebar toggle<span></span>
                        </div><!--/.sidebar toggle icon-->
                        <div class="d-flex flex-grow-1">
                            <ul class="navbar-nav flex-row align-items-center ml-auto">
                                <li class="nav-item dropdown quick-actions">
                                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                        <i class="typcn typcn-th-large-outline"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" >
                                        <div class="nav-grid-row row">
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-cog-outline d-block"></i>
                                                <span>Settings</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-group-outline d-block"></i>
                                                <span>Users</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-puzzle-outline d-block"></i>
                                                <span>Components</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-chart-bar-outline d-block"></i>
                                                <span>Profits</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-time d-block"></i>
                                                <span>New Event</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-edit d-block"></i>
                                                <span>Tasks</span>
                                            </a>
                                        </div>
                                    </div>
                                </li><!--/.dropdown-->
                                <li class="nav-item">
                                    <a class="nav-link" href="chat.html"><i class="typcn typcn-messages"></i></a>
                                </li>
                                <li class="nav-item dropdown notification">
                                    <a class="nav-link dropdown-toggle badge-dot" href="#" data-toggle="dropdown">
                                        <i class="typcn typcn-bell"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <h6 class="notification-title">Notifications</h6>
                                        <p class="notification-text">You have 2 unread notification</p>
                                        <div class="notification-list">
                                            <div class="media new">
                                                <div class="img-user"><img src="assets/dist/img/avatar.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</h6>
                                                    <span>Mar 15 12:32pm</span>
                                                </div>
                                            </div><!--/.media -->
                                            <div class="media new">
                                                <div class="img-user online"><img src="assets/dist/img/avatar2.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6><strong>Joyce Chua</strong> just created a new blog post</h6>
                                                    <span>Mar 13 04:16am</span>
                                                </div>
                                            </div><!--/.media -->
                                            <div class="media">
                                                <div class="img-user"><img src="assets/dist/img/avatar3.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6><strong>Althea Cabardo</strong> just created a new blog post</h6>
                                                    <span>Mar 13 02:56am</span>
                                                </div>
                                            </div><!--/.media -->
                                            <div class="media">
                                                <div class="img-user"><img src="assets/dist/img/avatar4.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6><strong>Adrian Monino</strong> added new comment on your photo</h6>
                                                    <span>Mar 12 10:40pm</span>
                                                </div>
                                            </div><!--/.media -->
                                        </div><!--/.notification -->
                                        <div class="dropdown-footer"><a href="">View All Notifications</a></div>
                                    </div><!--/.dropdown-menu -->
                                </li><!--/.dropdown-->
                                <li class="nav-item dropdown user-menu">
                                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                        <!--<img src="assets/dist/img/user2-160x160.png" alt="">-->
                                        <i class="typcn typcn-user-add-outline"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" >
                                        <div class="dropdown-header d-sm-none">
                                            <a href="" class="header-arrow"><i class="icon ion-md-arrow-back"></i></a>
                                        </div>
                                        <div class="user-header">
                                            <div class="img-user">
                                                <img src="assets/dist/img/avatar-1.jpg" alt="">
                                            </div><!-- img-user -->
                                            <h6>Naeem Khan</h6>
                                            <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c0ddc4c8d5c9c0e5c2c8c4ccc98bc6cac8">[email&#160;protected]</a></span>
                                        </div><!-- user-header -->
                                        <a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
                                        <a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
                                        <a href="" class="dropdown-item"><i class="typcn typcn-arrow-shuffle"></i> Activity Logs</a>
                                        <a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
                                        <a href="register.html" class="dropdown-item"><i class="typcn typcn-key-outline"></i> Sign Out</a>
                                    </div><!--/.dropdown-menu -->
                                </li>
                            </ul><!--/.navbar nav-->
                            <div class="nav-clock">
                                <div class="time">
                                    <span class="time-hours"></span>
                                    <span class="time-min"></span>
                                    <span class="time-sec"></span>
                                </div>
                            </div><!-- nav-clock -->
                        </div>
                    </nav><!--/.navbar-->
                    <!--Content Header (Page header)-->
                    <div class="content-header row align-items-center m-0">
                        <nav aria-label="breadcrumb" class="col-sm-4 order-sm-last mb-3 mb-sm-0 p-0 ">
                            <ol class="breadcrumb d-inline-flex font-weight-600 fs-13 bg-white mb-0 float-sm-right">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item"><a href="#">Ui Elements</a></li>
                                <li class="breadcrumb-item active">Modal</li>
                            </ol>
                        </nav>
                        <div class="col-sm-8 header-title p-0">
                            <div class="media">
                                <div class="header-icon text-success mr-3"><i class="typcn typcn-puzzle-outline"></i></div>
                                <div class="media-body">
                                    <h1 class="font-weight-bold">Modal</h1>
                                    <small>Modal window examples</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/.Content Header (Page header)--> 
                    <div class="body-content">
                        <div class="card mb-4">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="fs-17 font-weight-600 mb-0">Nifty Modal</h6>
                                    </div>
                                    <div class="text-right">
                                        <div class="actions">
                                            <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                            <div class="dropdown action-item" data-toggle="dropdown">
                                                <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a href="#" class="dropdown-item">Refresh</a>
                                                    <a href="#" class="dropdown-item">Manage Widgets</a>
                                                    <a href="#" class="dropdown-item">Settings</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="modal-text-header">
                                    <h1>Nifty Modal Window Effects<span>Some inspiration for different modal window appearances</span> </h1>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-md-6">
                                        <div class="column">
                                            <p class="modal-text">There are many possibilities for modal overlays to appear. Here are some modern ways of showing them using CSS transitions and animations.</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-6">
                                        <div class="column">
                                            <!-- All modals added here for the demo. You would of course just have one, dynamically created -->
                                            <!-- Modal fade in & scale effect -->
                                            <div class="md-modal md-effect-1" id="modal-1">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal slide in (right) effects -->
                                            <div class="md-modal md-effect-2" id="modal-2">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal slide in (bottom) effects -->
                                            <div class="md-modal md-effect-3" id="modal-3">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal newspaper effects -->
                                            <div class="md-modal md-effect-4" id="modal-4">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal fall effects -->
                                            <div class="md-modal md-effect-5" id="modal-5">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal side fall effects -->
                                            <div class="md-modal md-effect-6" id="modal-6">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal sticky up effects -->
                                            <div class="md-modal md-effect-7" id="modal-7">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal 3D flip (horizontal) effects -->
                                            <div class="md-modal md-effect-8" id="modal-8">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal 3D flip (vertical) effects -->
                                            <div class="md-modal md-effect-9" id="modal-9">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal 3D sign effects -->
                                            <div class="md-modal md-effect-10" id="modal-10">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal super scaled effects -->
                                            <div class="md-modal md-effect-11" id="modal-11">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal just Me effects -->
                                            <div class="md-modal md-effect-12" id="modal-12">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal 3D slit effects -->
                                            <div class="md-modal md-effect-13" id="modal-13">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal 3D rotate bottom effects -->
                                            <div class="md-modal md-effect-14" id="modal-14">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal 3D rotate in left effects -->
                                            <div class="md-modal md-effect-15" id="modal-15">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal blur effects -->
                                            <div class="md-modal md-effect-16" id="modal-16">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal let me in effects -->
                                            <div class="md-modal md-effect-17" id="modal-17">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal make way! effects -->
                                            <div class="md-modal md-effect-18" id="modal-18">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Modal slip from top effects -->
                                            <div class="md-modal md-effect-19" id="modal-19">
                                                <div class="md-content">
                                                    <h4 class="font-weight-600 mb-0">Modal Dialog</h4>
                                                    <div class="n-modal-body">
                                                        <p>This is a modal window. You can do the following things with it:</p>
                                                        <ul>
                                                            <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                                                            <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                                                            <li><strong>Close:</strong> click on the button below to close the modal.</li>
                                                        </ul>
                                                        <button class="btn btn-success md-close">Close me!</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-1">Fade in &amp; Scale</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-2">Slide in (right)</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-3">Slide in (bottom)</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-4">Newspaper</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-5">Fall</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-6">Side Fall</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-7">Sticky Up</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-8">3D Flip (horizontal)</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-9">3D Flip (vertical)</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-10">3D Sign</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-11">Super Scaled</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-12">Just Me</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-13">3D Slit</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-14">3D Rotate Bottom</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-15">3D Rotate In Left</button>
                                            <button class="btn btn-success md-trigger mb-2 mr-1" data-modal="modal-16">Blur</button>
                                            <!-- special modal that will add a perspective class to the html element -->
                                            <button class="btn btn-success md-trigger md-setperspective mb-2 mr-1" data-modal="modal-17">Let me in</button>
                                            <button class="btn btn-success md-trigger md-setperspective mb-2 mr-1" data-modal="modal-18">Make way!</button>
                                            <button class="btn btn-success md-trigger md-setperspective mb-2 mr-1" data-modal="modal-19">Slip from top</button>
                                            <!-- the overlay element -->
                                            <div class="md-overlay"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card mb-4 mb-lg-0">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Modal</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h5 class="font-weight-600">Modal windows</h5>
                                        <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
                                        <p>Modal contains title, content and footer</p>

                                        <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#exampleModal1">
                                            Launch demo modal
                                        </button>
                                        <!-- Modal -->
                                        <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title font-weight-600" id="exampleModalLabel4">Modal title</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                                                            layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
                                                            using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                                                            page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                                                            sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <br><br>

                                        <h5 class="font-weight-600">Modal size and colors</h5>
                                        <p>Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog</p>

                                        <!-- Extra large modal button -->
                                        <button type="button" class="btn btn-purple mb-2 mr-1" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
                                        <!-- Large modal button -->
                                        <button type="button" class="btn btn-purple mb-2 mr-1" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
                                        <!-- Small modal -->
                                        <button type="button" class="btn btn-purple mb-2 mr-1" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
                                        <!-- Extra large modal button -->
                                        <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
                                            <div class="modal-dialog modal-xl">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title font-weight-600" id="exampleModalLabel2">Extra large modal</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                                                            layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
                                                            using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                                                            page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                                                            sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title font-weight-600" id="exampleModalLabel3">Large modal</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                                                            layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
                                                            using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                                                            page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                                                            sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Small modal -->
                                        <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
                                            <div class="modal-dialog modal-sm">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title font-weight-600" id="exampleModalLabel1">Small modal</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                                                            layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
                                                            using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                                                            page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                                                            sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <br><br>
                                        <p>You can add extra class to color your modal window avalible class (<code>modal-success</code>, <code>modal-primary</code>, <code>mmodal-warning</code>,
                                            <code>modal-danger</code>)</p>
                                        <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-success mb-3 mr-1" data-toggle="modal" data-target="#successModal">
                                            Success
                                        </button>
                                        <!-- Modal success -->
                                        <div class="modal modal-success fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title font-weight-600" id="successModalLabel">Modal success</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                                                            layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
                                                            using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                                                            page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                                                            sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-primary mb-3 mr-1" data-toggle="modal" data-target="#primaryModal">
                                            Primary
                                        </button>
                                        <!-- Modal primary -->
                                        <div class="modal modal-primary fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="primaryModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title font-weight-600" id="primaryModalLabel">Modal primary</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                                                            layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
                                                            using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                                                            page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                                                            sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-warning mb-3 mr-1" data-toggle="modal" data-target="#warningModal">
                                            Warning
                                        </button>
                                        <!-- Modal warning -->
                                        <div class="modal modal-warning fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title font-weight-600" id="warningModalLabel">Modal primary</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                                                            layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
                                                            using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                                                            page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                                                            sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-danger mb-3 mr-1" data-toggle="modal" data-target="#dangerModal">
                                            Danger
                                        </button>
                                        <!-- Modal danger -->
                                        <div class="modal modal-danger fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="dangerModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title font-weight-600" id="dangerModalLabel">Modal primary</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                                                            layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
                                                            using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                                                            page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web
                                                            sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Option</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Type</th>
                                                    <th>Default</th>
                                                    <th>Description</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>backdrop</td>
                                                    <td>boolean or the string <code>'static'</code></td>
                                                    <td>true</td>
                                                    <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
                                                </tr>
                                                <tr>
                                                    <td>keyboard</td>
                                                    <td>boolean</td>
                                                    <td>true</td>
                                                    <td>Closes the modal when escape key is pressed</td>
                                                </tr>
                                                <tr>
                                                    <td>focus</td>
                                                    <td>boolean</td>
                                                    <td>true</td>
                                                    <td>Puts the focus on the modal when initialized.</td>
                                                </tr>
                                                <tr>
                                                    <td>show</td>
                                                    <td>boolean</td>
                                                    <td>true</td>
                                                    <td>Shows the modal when initialized.</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--/.body content-->
                </div><!--/.main content-->
                <footer class="footer-content">
                    <div class="footer-text d-flex align-items-center justify-content-between">
                        <div class="copy">© 2018 Bdtask Responsive Bootstrap 4 Dashboard Template</div>
                        <div class="credit">Designed by: <a href="http://www.bootstrapmb.com/">Bdtask</a></div>
                    </div>
                </footer><!--/.footer content-->
                <div class="overlay"></div>
            </div><!--/.wrapper-->
        </div>
        <!--Global script(used by all pages)-->
        <script src="assets/plugins/jQuery/jquery-3.4.1.min.js"></script>
        <script src="assets/dist/js/popper.min.js"></script>
        <script src="http://cdn.bootstrapmb.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script src="assets/plugins/metisMenu/metisMenu.min.js"></script>
        <script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
        <!-- Third Party Scripts(used by this page)-->
        <script src="assets/plugins/modals/classie.js"></script>
        <script src="assets/plugins/modals/modalEffects.js"></script>
        <!--Page Active Scripts(used by this page)-->

        <!--Page Scripts(used by all page)-->
        <script src="assets/dist/js/sidebar.js"></script>
    </body>
</html>